<!--  -->
<template>
  <div class>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="9">
          <el-input placeholder="请输入内容" clearable v-model="orderSeachInfo" @clear="clearSeachInfo">
            <el-button slot="append" icon="el-icon-search" @click="seachOrdersLists"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table class="mt15" :data="orderInfo.goods" border stripe style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="order_number" label="订单编号"></el-table-column>
        <el-table-column prop="order_price" label="订单价格"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">{{scope.row.pay_status==0?'否':'是'}}</template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"></el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">{{dataFormat(scope.row.create_time) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="success" @click="showTimeLine" icon="el-icon-view" size="mini"></el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt15"
        @current-change="handleCurrentChange"
        :current-page="paramsInfo.pagenum"
        :page-size="paramsInfo.pagesize"
        layout="total, prev, pager, next, jumper"
        :total="orderInfo.total"
      ></el-pagination>
    </el-card>
    <!-- dirlog区域 -->
    <!-- 物流进度dirlog -->
    <el-dialog title="物流进度" :visible.sync="timeLineDialogVisible" width="50%">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.ftime"
        >{{activity.context}}</el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: 'Orders',
  components: {},
  data() {
    return {
      orderInfo: {},
      paramsInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      orderSeachInfo: '',
      timeLineDialogVisible: false,
      activities: []
    }
  },
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getOrdersLists()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    async getOrdersLists() {
      let { data: res } = await this.$http.get('orders', {
        params: this.paramsInfo
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.orderInfo = res.data
    },
    seachOrdersLists() {},
    clearSeachInfo() {},
    dataFormat(time) {
      const date = new Date(time)
      let year = date.getFullYear()
      let month = (date.getMonth() + 1 + '').padStart(2, '0')
      let day = (date.getDate() + '').padStart(2, '0')
      let hour = (date.getHours() + '').padStart(2, '0')
      let minute = (date.getMinutes() + '').padStart(2, '0')
      let second = (date.getSeconds() + '').padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    async showTimeLine() {
      this.timeLineDialogVisible = true
      let { data: res } = await this.$http.get('/kuaidi/1106975712662')
      this.activities = res.data
    },
    handleCurrentChange(e) {
      this.paramsInfo.pagenum = e
      this.getOrdersLists()
    }
  }
}
</script>
<style scoped>
</style>